<!--
 * Description: FD 详情数据添加组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Jian.Yang
 * Date: 2021/01/04 14:08
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="140px" :model="formData" size="mini">
      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          HEAD
        </el-col>
      </el-row>

      <el-row>
        <!--rd功能分类 EE/ME 等等-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.rdFunction')">
            <el-input v-model="formData.rdFunction" v-blur:rdFunction="formData" clearable />
          </el-form-item>
        </el-col>

        <!--类别-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.category')">
            <el-select
              v-model="formData.category"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['category/getCategoryCollects']"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--rd负责人（记录上传用户域名）-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.rdOwner')">
            <el-input v-model="formData.rdOwner" v-blur:rdOwner="formData" clearable />
          </el-form-item>
        </el-col>

        <!--Tracking-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.trackingOption')">
            <el-input
              v-model="formData.trackingOption"
              v-blur:trackingOption="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--optionType-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.optionType')">
            <el-input v-model="formData.optionType" v-blur:optionType="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base & new 的partNo是否一致可选值 [Different、Same]；当为Different时，gap_type和gap_cause必填。-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.statusCompare')">
            <el-input v-model="formData.statusCompare" v-blur:statusCompare="formData" clearable />
          </el-form-item>
        </el-col>

        <!--差距类型-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gapType')">
            <el-input v-model="formData.gapType" v-blur:gapType="formData" clearable />
          </el-form-item>
        </el-col>

        <!--差距原因-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gapReason')">
            <el-input v-model="formData.gapReason" v-blur:gapReason="formData" clearable />
          </el-form-item>
        </el-col>

        <!--GCM Function-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gcmFunction')">
            <el-select
              v-model="formData.gcmFunction"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              @change="changeGcmFunction"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--采购分类-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.commodity')">
            <el-select
              v-model="formData.commodity"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['commodity/getCommodityCollectsByGcmFunction'](
                  formData.gcmFunction
                )"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--GCM Owner-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gcmOwner')">
            <el-select
              v-model="formData.gcmOwner"
              clearable
              filterable
              :placeholder="$t('FdData.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getGcmUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- GCM Cost -->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gcmCost')">
            <BaseInput
              v-model="formData.gcmCost"
              :max="9999999999.99999999"
              :min="0"
              :precision="7"
            />
          </el-form-item>
        </el-col>

        <!-- GCM Cost Delta -->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gcmCostDelta')">
            <BaseInput
              v-model="formData.gcmCostDelta"
              :max="9999999999.99999999"
              :min="0"
              :precision="7"
            />
          </el-form-item>
        </el-col>

        <!-- GCM Cost Remark -->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.gcmCostRemark')">
            <el-input v-model="formData.gcmCostRemark" v-blur:gcmCostRemark="formData" clearable />
          </el-form-item>
        </el-col>

        <!--pbmQuote-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.pbmQuote')">
            <el-input v-model="formData.pbmQuote" v-blur:pbmQuote="formData" clearable />
          </el-form-item>
        </el-col>

        <!--priceSource-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.priceSource')">
            <el-input v-model="formData.priceSource" v-blur:priceSource="formData" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          Base Project
        </el-col>
      </el-row>

      <el-row>
        <!--base-物料名称（物料的标准称呼）-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.basePartName')">
            <el-input v-model="formData.basePartName" v-blur:basePartName="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-物料号-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.basePartNo')">
            <el-input v-model="formData.basePartNo" v-blur:basePartNo="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-物料描述-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.basePartDesc')">
            <el-input v-model="formData.basePartDesc" v-blur:basePartDesc="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-材料类型-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseMaterialType')">
            <el-input
              v-model="formData.baseMaterialType"
              v-blur:baseMaterialType="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--base-材料颜色-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseMaterialColor')">
            <el-input
              v-model="formData.baseMaterialColor"
              v-blur:baseMaterialColor="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--base-尺寸规格-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseSize')">
            <el-input v-model="formData.baseSize" v-blur:baseSize="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-数量-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseQty')">
            <el-input-number v-model="formData.baseQty" controls-position="right" :min="1" />
          </el-form-item>
        </el-col>

        <!--base-工艺-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseIdProcess')">
            <el-input v-model="formData.baseIdProcess" v-blur:baseIdProcess="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-供应商-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseSupplier')">
            <el-input v-model="formData.baseSupplier" v-blur:baseSupplier="formData" clearable />
          </el-form-item>
        </el-col>

        <!--base-供应商PN-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseSupplierPn')">
            <el-input
              v-model="formData.baseSupplierPn"
              v-blur:baseSupplierPn="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--base-备注-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseRemark')">
            <el-input v-model="formData.baseRemark" v-blur:baseRemark="formData" clearable />
          </el-form-item>
        </el-col>

        <!--baseSapStandardPrice-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseSapStandardPrice')">
            <el-input
              v-model="formData.baseSapStandardPrice"
              v-blur:baseSapStandardPrice="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--baseSapPurchasePrice-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.baseSapPurchasePrice')">
            <el-input
              v-model="formData.baseSapPurchasePrice"
              v-blur:baseSapPurchasePrice="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--basePrice-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.basePrice')">
            <el-input v-model="formData.basePrice" v-blur:basePrice="formData" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col
          :span="24"
          style="background: #c9d2ca; text-align: left; padding: 5px; margin-bottom: 5px"
        >
          New Project
        </el-col>
      </el-row>

      <el-row>
        <!--new-物料号-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newPartNo')">
            <el-input v-model="formData.newPartNo" v-blur:newPartNo="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-物料名称（物料的标准称呼）-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newPartName')">
            <el-input v-model="formData.newPartName" v-blur:newPartName="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-物料描述（根据PN，从PLM系统中获取）-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newPartDesc')">
            <el-input v-model="formData.newPartDesc" v-blur:newPartDesc="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-材料类型-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newMaterialType')">
            <el-select
              v-model="formData.newMaterialType"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['material/getMaterialCollects']"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--base-材料颜色-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newMaterialColor')">
            <el-input
              v-model="formData.newMaterialColor"
              v-blur:newMaterialColor="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--new-尺寸规格-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newSize')">
            <el-input v-model="formData.newSize" v-blur:newSize="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-数量-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newQty')">
            <el-input-number v-model="formData.newQty" controls-position="right" :min="1" />
          </el-form-item>
        </el-col>

        <!--new-工艺-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newIdProcess')">
            <el-input v-model="formData.newIdProcess" v-blur:newIdProcess="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-供应商-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newSupplier')">
            <el-input v-model="formData.newSupplier" v-blur:newSupplier="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-供应商PN-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newSupplierPn')">
            <el-input v-model="formData.newSupplierPn" v-blur:newSupplierPn="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-备注-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newRemark')">
            <el-input v-model="formData.newRemark" v-blur:newRemark="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-临时物料号-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newTempPartNo')">
            <el-input v-model="formData.newTempPartNo" v-blur:newTempPartNo="formData" clearable />
          </el-form-item>
        </el-col>

        <!--new-是否新料-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newTooling')">
            <el-select
              v-model="formData.newTooling"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('YN')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--newSapStandardPrice-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newSapStandardPrice')">
            <el-input
              v-model="formData.newSapStandardPrice"
              v-blur:newSapStandardPrice="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--newSapPurchasePrice-->
        <el-col :span="8">
          <el-form-item :label="$t('FdData.newSapPurchasePrice')">
            <el-input
              v-model="formData.newSapPurchasePrice"
              v-blur:newSapPurchasePrice="formData"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block; text-align: center; margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { fdRowAddPart } from '@/api/serverbom/fd-row'

export default {
  name: 'ServerDetailEditAdd',
  props: {
    inputData: {
      default: () => null,
      type: Object
    },
    // fd 最后一行
    rowNo: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {
        fdRowId: '',
        fdId: '',
        version: '',
        rdFunction: '',
        category: '',
        itemNo: '',
        rdOwner: '',
        statusCompare: '',
        gapType: '',
        gapReason: '',
        baseCost: '',
        isAssigned: '',
        assignedTime: '',
        commodity: '',
        gcmOwner: '',
        gcmCost: '',
        gcmCostTime: '',
        gcmCostRemark: '',
        isGcmCost: '',
        pbmCost: '',
        pbmCommitCost: '',
        pbmCostTime: '',
        pbmCostRemark: '',
        isPbmCost: '',
        costDelta: '',
        currentOwner: '',
        trackingOption: '',
        basePartNo: '',
        basePartName: '',
        basePartDesc: '',
        baseMaterialType: '',
        baseMaterialColor: '',
        baseSize: '',
        baseQty: '',
        baseIdProcess: '',
        baseSupplier: '',
        baseSupplierPn: '',
        baseRemark: '',
        newPartNo: '',
        newTempPartNo: '',
        newPartName: '',
        newPartDesc: '',
        newMaterialType: '',
        newMaterialColor: '',
        newSize: '',
        newQty: '',
        newIdProcess: '',
        newTooling: '',
        newSupplier: '',
        newSupplierPn: '',
        newRemark: ''
      }
    }
  },
  mounted() {
    this.$store.dispatch('category/initCategoryCollectsLazy')
    this.$store.dispatch('material/initMaterialCollectsLazy')
    this.$store.dispatch('commodity/initCommodityCollectsLazy')
  },
  methods: {
    async save() {
      try {
        await this.$confirmBox(this.$t('button.save'), 'success')
        this.isRequesting = true
        const addData = {
          ...this.formData,
          itemNo: this.rowNo,
          rowNo: this.rowNo,
          fdId: this.inputData.fdId,
          version: this.inputData.version
        }
        await fdRowAddPart(addData, { msgSuccess: true, msgError: true })
        this.$emit('save', addData)
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    changeGcmFunction(val) {
      this.formData.gcmOwner = this.fdBaseData[val.toLowerCase() + 'Owner']
      this.formData.commodity = ''
    }
  }
}
</script>
